<!--
 * @Author: ChaiHongJun
 * @Date: 2021-03-23 10:09:54
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-04-30 14:21:26
 * @version: 
 * @Description: 
-->
<template>
  <div id="app">
    <!-- 顶部导航 -->
    <commonHeader></commonHeader>
    <div class="layout">
      <div class="fluid">
        <router-view />
        <Player :tracks="getPlayingQueue"></Player>
      </div>
    </div>
    <!-- 底部公告区域 -->
    <commonFooter></commonFooter>
  </div>
</template>
<script>
import commonHeader from "@/components/common/header/Index";
import commonFooter from "@/components/common/footer/Index";
import Player from "@/components/common/player/Index";
import { mapGetters } from "vuex";
export default {
  components: {
    commonHeader,
    commonFooter,
    Player, //播放器控件
  },
  computed: {
    ...mapGetters(["getPlayingQueue"]),
  },
};
</script>
<style lang="stylus" scoped>
.layout {
  width: 100%;
  min-height: calc(100vh - 252px);
  z-index: 998;
  width: auto;
  min-width: 1024px;
  padding-top: 70px;

  .fluid {
    padding: 20px 0;
  }
}
</style>
